<template lang="html">
    <Panel title="导航条" :class="$style.panel">
        <ul :class="$style.content">
            <li v-for="item in nav" ::key="item.link">
                <router-link :to="{ name: item.link}">
                    <span class="iconfont">{{item.icon}}</span>
                    <p>{{item.title}}</p>
                </router-link>
            </li>
            <!-- <li>
                <router-link :to="{ name: 'money'}">
                    <img src="//img12.360buyimg.com/jrpmobile/jfs/t3811/55/345433999/2930/116d3dd1/580f1e25N028a1f2c.png?width=66&height=66" alt="">
                    <p>理财</p>
                </router-link>
            </li>
            <li>
                <router-link :to="{ name: 'ious'}">
                    <img src="//img12.360buyimg.com/jrpmobile/jfs/t3343/179/621044750/1484/5af6b11a/580f50e4N005181d0.png?width=66&height=66" alt="">
                    <p>白条</p>
                </router-link>
            </li>
            <li>
                <router-link :to="{ name: 'raise'}">
                    <img src="//img12.360buyimg.com/jrpmobile/jfs/t3604/98/635506544/2317/443d3a51/580f240aNbee3dcc4.png?width=66&height=66" alt="">
                    <p>众筹</p>
                </router-link>
            </li>
            <li>
                <router-link :to="{ name: 'about'}">
                    <img src="//img12.360buyimg.com/jrpmobile/jfs/t3340/68/639059082/2591/800e2d6b/580f51cdN4caf20b2.png?width=66&height=66" alt="">
                    <p>我的</p>
                </router-link>
            </li> -->
        </ul>
    </Panel>
</template>

<script>
import Panel from "../core/panel.vue"
export default {
    data(){
        return{
            nav:[
                {'title':'首页','link':'home',icon:'\ue619'},
                {'title':'理财','link':'money',icon:'\ue67a'},
                {'title':'白条','link':'ious',icon:'\ue64b'},
                {'title':'众筹','link':'raise',icon:'\ue616'},
                {'title':'我的','link':'about',icon:'\ue635'},
            ]
        }
    },
    components: {
        Panel,
    },
    props: {
        cname: {
            type: String,
            default: "",
        },
    },
}
</script>

<style lang="scss" module>
  @import '~@/assets/css/element.scss';
  .panel{
    @include panel;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    margin: 0!important;
    z-index: 9;
    >h4{display: none;}
    .content{
      @include flex(row);
      border-top: 1px solid #bebebe;
      justify-content: space-around;
          
      li{
        text-align: center;
        a{
            text-decoration: none;
            color: #656565;
        }
        img{
          width: 44px;
          height: 44px;
          display: inline-block;
          margin: 12px auto 6px;
        }
        span{
            display: inline-block;
            font-size: 46px;
            margin: 12px auto 6px;
            &:nth-child(1){
                font-size: 50px;
            }
        }
        p{
          font-size: 26px;
          
        }
      }
    }
  }
</style>
